<template>
  <!-- 歌手 -->
  <div class="content">
    <div>
      <span>语种：</span>
      <el-radio-group v-model="singerobj.area" @change='getsingerdata'>
        <el-radio-button v-for="item in area" :key="item.value" :label="item.value">
          {{item.label}}
        </el-radio-button>
      </el-radio-group>
    </div>
    <div>
      <span>分类：</span>
      <el-radio-group v-model="singerobj.type" @change='getsingerdata'>
        <el-radio-button v-for="item in type" :key="item.value" :label="item.value">
          {{item.label}}
        </el-radio-button>
      </el-radio-group>
    </div>
    <div>
      <span>筛选：</span>
      <el-radio-group v-model="singerobj.word" @change='getsingerdata'>
        <el-radio-button v-for="item in word" :key="item.value" :label="item.value">
          {{item.label}}
        </el-radio-button>
      </el-radio-group>
    </div>

    <ul class="ul">
      <li class="li" v-for="item in datalist" :key="item.index">

        <img class="img" :src="item.img1v1Url" alt="" @click="min(item.id)">
        <p class="name">{{item.name | ellipsis}}</p>
        <a href="#" class="s10 black">{{ }}</a>
      </li>
    </ul>
    <p class="p1"></p>
  </div>
</template>
<style scoped>
.content {
  position: absolute;
  top: 130px;
  left: 300px;
}
.ul {
  display: flex;
  flex-wrap: wrap;
  width: 900px;
}
.li {
	display: flex;
	flex-direction: column;
  list-style: none;
  padding: 20px;
}
.img {
  width: 140px;
  height: 140px;
}
.el-radio-group {
  width: 800px;
}
.p1 {
  height: 200px;
}
</style>
<script>
import { API } from "../../../common/constant";
import axios from "axios";
export default {
  data() {
    return {
      datalist: {},
      singerobj: {
        area: "-1",
        type: "-1",
        word: "",
      },
      area: [
        { label: "全部", value: "-1" },
        { label: "华语", value: "7" },
        { label: "欧美", value: "96" },
        { label: "日本", value: "8" },
        { label: "韩国", value: "16" },
        { label: "其他", value: "0" },
      ],
      type: [
        { label: "全部", value: "-1" },
        { label: "男歌手", value: "1" },
        { label: "女歌手", value: "2" },
        { label: "乐队", value: "3" },
      ],
      word: [],
    };
  },
  mounted() {
    // type语种 -1:全部 1:男歌手 2:女歌手 3:乐队
    // var a = 1;
    // area分类	-1:全部 7华语 96欧美 8:日本 16韩国 0:其他
    // var b = 7;
    // var c = "b";
    // initial筛选 name 字段开头为 b 或者拼音开头为 b 为顺序排列
    // var c =
    this.handleCity();
		// this.min()
  },
  methods: {
    getsingerdata() {
      // console.log(this.singerobj);

      axios({
        // 请求的地址
        url: `${API}/artist/list?type=${this.singerobj.type}&area=${this.singerobj.area}&initial=${this.singerobj.word}`,
        // 请求的方法
        method: "get",
      }).then((res) => {
        console.log(res);
        this.datalist = res.data.artists;
      });
    },
    min(id) {
      console.log(id);
      this.$router.push("/singer2?q=" + id);
    },
    // 26个字母
    handleCity() {
      for (var i = 65; i < 91; i++) {
        let obj = {};
        obj.label = String.fromCharCode(i);
        obj.value = String.fromCharCode(i);
        this.word.push(obj);
      }
      // console.log(this.word);
    },
  },
  //过渡器
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 8) {
        return value.slice(0, 8) + "...";
      }
      return value;
    },
  },
};
</script>
